<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jsonp</title>
  </head>
  <script src="./lib/angular.min.js"></script>
  <body ng-app='App'>

<div ng-controller='myCtrl'>
   <button type="button" name="button" ng-click='getWeather()'>获取天气预报</button>
   <table>
        <tr ng-repeat='item in weatherData'>
          <td>{{item.date}}</td>
          <td><img ng-src="{{item.dayPictureUrl}}" alt=""></td>
          <td><img ng-src="{{item.nightPictureUrl}}" alt=""></td>
          <td>{{item.temperature}}</td>
          <td>{{item.weather}}</td>
          <td>{{item.wind}}</td>
        </tr>
  </table>
</div>





  </body>

<script>

   var App = angular.module('App',[]);
   App.controller('myCtrl',['$scope','$http','$log',function($scope,$http,$log){
       $scope.weatherData = [];

       $scope.getWeather = function(){



         $http({
           url:'http://api.map.baidu.com/telematics/v3/weather',
           method:'jsonp',
           params:{
             location:'广州',
             output:'json',
             ak:'0A5bc3c4fb543c8f9bc54b77bc155724',
             callback:'JSON_CALLBACK'

           }
         }).success(function(info){


           $scope.weatherData = info.results[0].weather_data;



         })

       };


   }]);



</script>

</html>
